<%@ page import="com.the8thfold.anton.users.Role; org.codehaus.groovy.grails.plugins.springsecurity.SpringSecurityUtils; com.the8thfold.anton.users.Roles; org.apache.tools.ant.Target" contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <title>My Account</title>
    <meta name="layout" content="main" />

    <link rel="stylesheet" href="${resource(dir:'js/codemirror',file:'codemirror.css')}" />
    <link rel="stylesheet" href="${resource(dir:'js/codemirror/mode/xml',file:'xml.css')}" />

    <g:javascript library="codemirror/overlay" />
    <g:javascript library="codemirror/codemirror" />
    <g:javascript library="codemirror/mode/xml/xml" />

    <g:javascript>
        $(document).ready(function(){
        });
    </g:javascript>

</head>
<body>

<div>
    <h1>My Account</h1>
    <hr/>
    <br/>
    <span><b>Created:</b> <prettytime:display date="${account.dateCreated}"/> </span>
    <g:if test="${error}">
        <div class="errors">${error}</div>
        <br/>
    </g:if>
    <div class="css_right toolbar">
        <a class="btn-text popup-remote" href="${createLink(controller: 'account', action: 'changePasswordSelf', id: account?.userId)}" >Change Password</a>
    </div>
    <br/>

    <table style="border: none;">
        <tr>
            <td width="15%"><h2>Email Address:</h2></td>
            <td>
                <g:formRemote onSuccess="jQuery('#${account?.userId}_emailAddress').effect('highlight',{color: '#90ee90'},1000);" onFailure="jQuery('#${account?.userId}_emailAddress').effect('highlight',{color: 'red'},1000);" name="f1" url="[controller: 'account', action: 'updateFieldSelf', id: account?.userId]">
                    <g:hiddenField name="field" value="emailAddress"/>
                    <input id="${account?.userId}_emailAddress" class="ui-corner-all" type="text" name="value" value="${account?.emailAddress}" style="width: 50%;"/>
                    <a href="javascript: void();" onclick="jQuery('#f1').submit();" name="submit" class="btn save" icon="ui-icon-disk"></a>
                </g:formRemote>
            </td>
        </tr>

        <tr>
            <td width="15%"><h2>First Name:</h2></td>
            <td>
                <g:formRemote onSuccess="jQuery('#${account?.userId}_firstName').effect('highlight',{color: '#90ee90'},1000);" onFailure="jQuery('#${account?.userId}_firstName').effect('highlight',{color: 'red'},1000);" name="ffirstName" url="[controller: 'account', action: 'updateFieldSelf', id: account?.userId]">
                    <g:hiddenField name="field" value="firstName"/>
                    <input id="${account?.userId}_firstName" class="ui-corner-all" type="text" name="value" value="${account?.firstName}" style="width: 50%;"/>
                    <a href="javascript: void();" onclick="jQuery('#ffirstName').submit();" name="submit" class="btn save" icon="ui-icon-disk"></a>
                </g:formRemote>
            </td>
        </tr>

        <tr>
            <td width="15%"><h2>Last Name:</h2></td>
            <td>
                <g:formRemote onSuccess="jQuery('#${account?.userId}_lastName').effect('highlight',{color: '#90ee90'},1000);" onFailure="jQuery('#${account?.userId}_lastName').effect('highlight',{color: 'red'},1000);" name="flastName" url="[controller: 'account', action: 'updateFieldSelf', id: account?.userId]">
                    <g:hiddenField name="field" value="lastName"/>
                    <input id="${account?.userId}_lastName" class="ui-corner-all" type="text" name="value" value="${account?.lastName}" style="width: 50%;"/>
                    <a href="javascript: void();" onclick="jQuery('#flastName').submit();" name="submit" class="btn save" icon="ui-icon-disk"></a>
                </g:formRemote>
            </td>
        </tr>
    </table>

</div>

</body>
</html>